<!DOCTYPE html>
<html>

<head lang="en">
	<title>首页</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/jquery/jquery.min.js"></script>
	<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/reset.css" rel="stylesheet" >
	<link rel="stylesheet" href="/css/index.css" rel="stylesheet">
	<script src="/js/plugins/jrender/jrender.min.js"></script>
<!--	<script src="/js/plugins/dialog2/dialog.min.js"></script>-->
	<script src="/js/plugins/dialog2/dialog.min.js"></script>
	<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
	<script src="/js/common.js"></script>
	<script src="/js/queryAndBlank.js"></script>
	<script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
	<script>
		$(function () {

		    //获取地区的id
            var strategyId = getParams().id;

		    //根据地区的id查询所拥用的酒店
            var currentPage=1;//设置当前页
            var pages;//总页数
            var travelArr=[];//用户存储文字的容器
            var loading=false;//标记是否正在查询
            function query() {
                if (loading){
                    return;//代表正在查询的话就停止当前查询
                }
                loading=true;//代表当前正在查询
                $.get(baseUrl+"/grogshops",{regionId:strategyId,currentPage:currentPage}, function (data) {
                    $.merge(travelArr,data.list);//把第二个数据个到第一个
                    var json={list:travelArr};
                    $(".strategyCommend").renderValues(json,{
                        getHref: getHref
                    });
                    pages=data.pages;
                    currentPage++;
                    loading=false;//查询完毕之后,关闭这个标志
                })
            }

            query();//默认调用一次查询

            //监听窗口滚动事件
            $(window).scroll(function () {
                //判断文本隐藏高度加上窗体的高度是否大于文本高度
                if ($(document).scrollTop()+$(window).height()>=$(document).height()) {
                    //当前页小于总页数的时候才去查询
                    if (currentPage<=pages) {
                        query();
                    }else {
                        $(document).dialog({
                            autoClose: 2000,
                            content: '已经到底了',
                        });
                    }
                }
            })
			/*$.get(baseUrl+"/grogshops",{regionId:strategyId,pageSize:0},function (data) {
                console.log(data);
                //渲染数据
				$(".strategyCommend").renderValues(data,{
                    getHref:getHref
				})
            })*/
            //给时间选择框绑定点击事件,弹出日历
            $("#loginForm input[name='checkInTime']").click(function () {
                WdatePicker({
                    readOnly: true, //只读
                    //设置最大可选时间
                    minDate: new Date()
                });
            });
			//获取所有的地区
			$.get(baseUrl+"/regions" ,{pageSize:0},function (data) {
                var temp = '';
                $.each(data,function (index, ele) {
                    temp += '<option  value='+ele.id+' data-id='+ele.id+'>'+ele.name+'</option>';
                });
                $('.region').html(temp);
                 //获取选中的下拉框的id
				var did=$('select').val()

                $('.btn-search').click(function () {
                    //获取选中的下拉框的id
                    var did=$('select').val()
                    window.location.href="/hotel.html?id="+did;
                    console.log(did);
                });
                //回显下拉框
                $("select").val(strategyId)
            })

			//排名点击事件
			$(".high").click(function (data) {
                $.ajaxSettings.traditional = true;
                var desc = $(this).data("id")
                // console.log(desc);
                var currentPage=1;
                var pages;//总页数
                var travelArr=[];//用户存储文字的容器
                var loading=false;//标记是否正在查询
                function query() {
                    if (loading){
                        return;//代表正在查询的话就停止当前查询
                    }
                    loading=true;//代表当前正在查询
                    $.get(baseUrl + "/grogshops", {regionId: strategyId, desc: desc,pageSize:0}, function (data) {
                        $.merge(travelArr,data.list);//把第二个数据个到第一个
                        var json={list:travelArr};
                        $(".strategyCommend").renderValues(json,{
                            getHref: getHref
                        });
                        pages=data.pages;
                        currentPage++;
                        loading=false;//查询完毕之后,关闭这个标志
                    })
                }

                query();//默认调用一次查询

                //监听窗口滚动事件
                $(window).scroll(function () {
                    //判断文本隐藏高度加上窗体的高度是否大于文本高度
                    if ($(document).scrollTop()+$(window).height()>=$(document).height()) {
                        //当前页小于总页数的时候才去查询
                        if (currentPage<=pages) {
                            query();
                        }else {
                            $(document).dialog({
                                autoClose: 2000,
                                content: '已经到底了',
                            });
                        }
                    }
                })



                //console.log(orderBy);
               /* $.get(baseUrl + "/grogshops", {regionId: strategyId, desc: desc,pageSize:0}, function (data) {
                     console.log(data);
                    //渲染数据
                    $(".strategyCommend").renderValues(data, {
                        getHref: getHref
                    })
                })*/
            })

			//根据地区的id查询所属的攻略
			$(".site .sites").click(function () {
                console.log("点击了");
            })


        })
	</script>
</head>
<body>


<div class="search-head">
	<div class="row nav-search">
		<div class="col-2">
			<a href="javascript:window.history.go(-1)">
				<span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
			</a>
		</div>
		<!--<div class="col-10">
			<div class="input-group-sm search">
				<input class="form-control searchBtn" placeholder="找酒店">
			</div>
		</div>-->
	</div>
</div>


<div class="container">
	<h6 class="module-title"></h6>
	<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
		<div id="travelsCommends">
			<div class="carousel-inner" render-loop="list">
			<!--	<div class="carousel-item">
					<a render-fun="getHref" render-key="list.travelId" data-url="/travelContent.html?id=" >
						<img class="d-block w-100"  render-src="list.coverUrl" width="100%" height="200px">
					</a>

				</div>-->
			</div>
		</div>
		<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only"></span>
		</a>
		<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only"></span>
		</a>

		<div class="card card-container ">
			<h6 class="module-title" style="text-align: center">酒店搜索</h6>
			<form class="form-signin" id="loginForm" method="post">
				<!--<input type="text"  name="region" value="" class=" badge-pill" placeholder="出发目的地" style="width: 130px;">-->
				<select class=" badge-pill region" style="width: 130px;" name="regionId">

				</select>
				<input type="text"  name="checkInTime" value="" class=" badge-pill" placeholder="入住时间" style="width: 130px;">
				<input type="text"  name="checkInTime" value="" class=" badge-pill" placeholder="截止时间" style="width: 130px;"><br>

				<nobr>
					<p style="float: left">价格:</p>
					<p style="float: left;color: #0D8BBD" class="high" data-id="1">由高到底 </p></n>
					<p style="float: contour" class="high" data-id="2">有低到高</p>
				</nobr>
					<!--自定义价格<input type="text"   class=" badge-pill minPrice" placeholder="最低价" style="width: 80px;">~
					<input type="text" i class=" badge-pill maxPrice" placeholder="最高价" style="width: 80px;"><br>-->
					<!--自定义<input class=" badge-pill" style="width: 50px;" type="text" >~
					<input class=" badge-pill" style="width: 50px;" type="text" >-->
			</form>
			<nobr>
				<p style="float: left;">评分:</p>
				<p style="float: left;color: #0D8BBD" class="high" data-id="3">评分由高到底 </p>
				<p class="high" data-id="4">评分低到到高</p>
				</span>
			</nobr>
			<button class="btn btn-success btn-search">查找</button>

		</div>
	</div>

	<h1>
		<hr/>
	</h1>

	<div class="container strategyCommend">
			 <h6>骡窝窝推荐</h6>
		<div id="allTravels" render-loop="list">
			<!--detail-->
			<div class="row detail">
				<div class="col" >
					<!--<a render-fun="getHref" render-key="list.id" data-url="/travelContent.html?id=" >
						<h4 render-html="list.title"></h4>
					</a>-->
					<p>
						<a render-fun="getHref" render-key="list.id" data-url="/reserve.html?id=" >
							<img render-src="list.coverUrl" width="150" height="100" >
						 </a>
					</p>

				</div>
				<!--bigimg-->
				<div class="col simsun">

					<a render-fun="getHref" render-key="list.id" data-url="/reserve.html?id=" >
						<nobr>
								<span>
									<p render-html="list.grogshopName" style="float: left"></p>
									<p role="button" style="float: right" render-html="list.grade">5.4</p>
									<p role="button" style="float: right">评分:</p>
								</span>
						</nobr>
					</a><br>
					<!--a标签不能跳转data-toggle="buttons"-->
					<div class="btn-group-toggle btn-toggle site"  >
						<nobr>
						<a style="float: left;color: #00bbd3" href="https://www.amap.com" render-html="list.site">立即查看</a>
						<a render-fun="getHref" render-key="list.id" data-url="/reserve.html?id="  class="btn btn-warning p-0"  style="float: right">立即查看</a>
						</nobr><br><br>
						<span style="float: right">
							<nobr render-html="list.price" ></nobr><nobr ><i class="fa fa-jpy" aria-hidden="true"></i>起</nobr>
						</span>

					</div>

						</div>
				   </div >

				<h1>
					<br>
				</h1>
			</div>

		</div>
	</div>


</div>

<div id="absorbModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">

		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->



</body>

</html>